<template>
  <div>
    <div class="box">
      <sell-dog
      v-for="(item, index) in arrDog"
      :key="item.dogName"
      :i="index"
      :dogSrc="item.dogImgUrl"
      :dogBreed="item.dogName"
      @choose-dog="chooseDog"
      />
    </div>
    <ul>
      <li
      v-for="(item, index) in newArrDog"
      :key="index"
      >
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
import SellDog from './components/SellDog.vue'
export default {
  components: { SellDog },
  data () {
    return {
      arrDog: [
        {
          dogImgUrl:
        'http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg',
          dogName: '博美'
        },
        {
          dogImgUrl:
        'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1224576619,1307855467&fm=26&gp=0.jpg',
          dogName: '泰迪'
        },
        {
          dogImgUrl:
        'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2967740259,1518632757&fm=26&gp=0.jpg',
          dogName: '金毛'
        },
        {
          dogImgUrl:
        'https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c',
          dogName: '哈士奇！'
        },
        {
          dogImgUrl:
        'https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c',
          dogName: '还是哈士奇！！'
        },
        {
          dogImgUrl:
        'https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c',
          dogName: '仍然是哈士奇！！！'
        }
      ],
      newArrDog: []
    }
  },

  created () {

  },

  methods: {
    chooseDog (e) {
      // console.log(e)
      // this.newArrDog[0] = e
      // console.log(this.newArrDog)
      // this.newArrDog.push(this.arrDog[e].dogName)
      // this.newArrDog.push(e)

      if (this.newArrDog.indexOf(e) === -1) {
        console.log('添加狗子')
        this.newArrDog.push(e)
      } else {
        console.log('删除狗子')
        const index = this.newArrDog.indexOf(e)
        this.newArrDog.splice(index, 1)
      }

      // console.log(e)
      // console.log(this.newArrDog)
    }
  }
}
</script>

<style scoped lang='less'>
  .box {
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
</style>
